<template>
  <div>
    <!-- 头部 -->
    <el-card class="head-content">
      <div class="head-content-box">
        <span class="head-content-txt">素材分类管理</span>
        <div style="width: 1px;height: 50px;background-color: #797979; margin-left: 20px;" />
        <!-- <div class="head-content-txt-newlyAdded" @click="sort">
          <el-button type="primary" size="small" @click="canDrag = !canDrag">{{ canDrag ? '保存排序' : '调整排序' }}</el-button>
        </div> -->
      </div>
    </el-card>
    <!-- 主体 -->
    <el-card class="subjectContent">
      <el-form ref="form" :model="form" :inline="true" size="small" @submit.native.prevent>
        <el-form-item>
          <el-input v-model="form.className" placeholder="请输入类目名称/关键字" style="width:260px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData('init')">搜索</el-button>
          <el-button type="primary" @click="empty">重置</el-button>
        </el-form-item>
      </el-form>
      <MaterialDragCascader
        :can-drag="canDrag"
        :cascader-data.sync="cascaderData"
        :parent-data="parentData"
        :lv="1"
        @menuHandle="menuHandle"
      />
    </el-card>

    <!-- 模态框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="50%">
      <el-form ref="formS" :model="formS" size="small" label-width="80px" :rules="rules">
        <el-form-item label="名称" prop="className">
          <el-input v-model="formS.className" placeholder="请输入名称" type="text" maxlength="10" show-word-limit />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formS.status">
            <el-radio label="Y">启用</el-radio>
            <el-radio label="N">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="back">取消</el-button>
          <el-button type="primary" @click="preservation">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 引入拖拽组件
// import draggable from 'vuedraggable'
import MaterialDragCascader from './components/MaterialDragCascader.vue'
import {
  sourceClassInfoList,
  sourceClassInfoEdit,
  sourceClassInfoAdd,
  sourceClassInfoDel } from '@/api/knowledge'
export default {
  components: {
    // 调用组件
    MaterialDragCascader
  },
  data() {
    return {
      newClassTitle: '',
      dialogFormVisible: false, // 模态框
      canDrag: true,
      dialogTitle: '新增',
      parentData: {
        id: 0,
        parentId: 0,
        level: 0,
        rootId: undefined
      },
      formS: {
        className: '',
        status: ''
      },
      rules: {
        className: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请上选择状态', trigger: 'change' }
        ]
      },
      form: {
        className: ''// 搜索关键字
      },
      cascaderData: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    menuHandle(type, data) {
      console.log('menuHandle', type, data)
      switch (type) {
        case 'add':
          this.changeData = data
          this.dialogTitle = '新增'
          this.formS = {
            className: '',
            status: 'Y'
          }
          this.dialogFormVisible = true
          break
        case 'edit':
          this.changeData = data
          this.dialogTitle = '修改'
          this.formS = {
            id: data.id,
            className: data.className,
            status: data.status
          }
          this.dialogFormVisible = true
          break
        case 'del':
          this.$confirm('此操作将永久删除该类目, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            sourceClassInfoDel({ id: data.id }).then(res => {
              this.$message.success('操作成功！')
              this.fetchData('init')
            })
          })
          break
        case 'editStatus':
          sourceClassInfoEdit({
            id: data.id,
            status: data.status,
            className: data.className
          }).then(res => {
            // this.$message.success('操作成功！')
          })
          break
      }
    },
    // 确定
    preservation() {
      this.$refs['formS'].validate((valid) => {
        if (valid) {
          if (this.formS.id) {
            sourceClassInfoEdit(this.formS).then(res => {
              this.$message.success('操作成功！')
              this.dialogFormVisible = false
              this.fetchData('init')
            })
          } else {
            sourceClassInfoAdd(this.formS).then(res => {
              this.$message.success('操作成功！')
              this.dialogFormVisible = false
              this.fetchData('init')
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 取消
    back() {
      this.dialogFormVisible = false
    },
    // 添加新分类
    NewClass() {
      this.dialogFormVisible = true
    },
    // 保存排序
    sort() {

    },
    // 搜索
    fetchData() {
      const obj = {
        pageSize: 100,
        currentPage: 1,
        className: this.form.className
      }
      sourceClassInfoList(obj).then(res => {
        console.log('res', res)
        this.cascaderData = res.data.list
      })
    },
    // 重置
    empty() {
      this.form = this.$options.data().form
    }
  }
}
</script>

<style lang="scss" scoped="scoped">

  .app-uploader-img-plus {
    width: 100px;
    height: 100px;
    border: 1px dotted #ddd;
    .avatar{
      width: 100px;
      height: 100px;
    }
    .app-uploader-img-plus-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
  }
  .head-content {
    width: 100%;

    .head-content-box {
      display: flex;
      align-items: center;

      .head-content-txt {
        font-size: 24px;
        font-weight: 500;
      }

      .head-content-txt-newlyAdded {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 3%;
      }
    }
  }
  .subjectContent{
margin-top: 10px;
  }
</style>
